<template>
    <div class="app-container travelApplicationDetails">
        <div class="apply-query">
            <el-row class="filter-query">
                <el-col><span>{{$t("salesSummary.queryCondition")}}</span></el-col>
            </el-row>
            <el-form label-width="120px" style="padding: 10px 20px 0">
                <el-row style="padding-bottom: 10px">
                     <el-col :span="4">
                        <div style="margin-right: 40px">
                          <div class="labelName">{{$t('scheduleManager.progressList.vendorShortName')}}</div><!--厂商简称-->
                          <popover-select selectType="vendor" :placeholder="$t('scheduleManager.worksDetails.vendorPlaceholder')" valueObjName="vendorShortName" v-model="listQuery.vendorName"></popover-select>
                        </div>
                    </el-col>
                  <el-col :span="4">
                    <div style="margin-right: 40px">
                      <div class="labelName">{{ $t('vendor.vendorType') }}</div>
                      <yt-select :clearable="true" v-model="listQuery.vendorType" @selectedChange="()=>{listQuery.mainClassifyArray = []}" :listData="$store.getters.allDic.manufacturer"></yt-select>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div style="margin-right: 40px">
                      <div class="labelName">主項目分類</div>
                      <yt-select :clearable="true" v-model="listQuery.mainClassifyArray" :multiple="true"
                                 :listData="listQuery.vendorType?listQuery.vendorType.includes('1')?$store.getters.allDic.materialDic:listQuery.vendorType.includes('2')?$store.getters.allDic.engineDic:listQuery.vendorType.includes('3')?$store.getters.allDic.equipmentDic:listQuery.vendorType.includes('4')?$store.getters.allDic.softBody:[]:[]"></yt-select>
                    </div>
                  </el-col>
                    <el-col :span="6" style="margin-top: 23px">
                        <el-button class="yt-btn-ys" @click="getReport" type="primary">{{$t("salesSummary.search")}}</el-button>
                        <el-button class="yt-btn" @click="reset" type="primary">{{$t("salesSummary.reset")}}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="data-list">
          <div class="list-content">
            <span>廠商排名表</span>
          </div>
          <div class="list-operation">
            <el-button class="yt-btn-ys"  @click="exportExcel" type="primary">匯出廠商評鑒評分</el-button> <!--:row-style="changeCss"-->
          </div>
          <el-table :data="list" :empty-text="$t('placeholder.emptyText')" border style="width: 100%;" class="yt-table  yt-temporary" v-loading.body="loading" max-height="600" :row-style="{height: '25px'}" @sort-change="sortDate">
            <el-table-column align="center" type="index" :label="$t('vendor.serialNumber')" width="60"/>
            <el-table-column align="center" :label="$t('vendor.vendorName')" prop="vendorName" class-name="bg" width="200" sortable="custom"/>
            <el-table-column align="center" :label="$t('vendor.vendorId')" prop="vendorNo" class-name="bg" sortable="custom"/>
            <el-table-column align="center" :label="$t('vendor.vendorType')" prop="vendorType" sortable="custom">
            </el-table-column>
            <!--主項目分類，多个以“,”分割 取值字典-->
            <el-table-column align="center" label="主項目分類" min-width="150" prop="mainClassify" sortable="custom">
            </el-table-column>
            <!--次項目分類 (填寫)-->
            <el-table-column align="center" label="次項目分類" min-width="150" prop="secondaryClassify" sortable="custom">
            </el-table-column>
            <!--工务平均分-->
            <el-table-column align="center" label="工務平均分" prop="workAverage" sortable="custom">
            </el-table-column>
            <!--采购平均分-->
            <el-table-column align="center" label="採購平均分"  prop="purchaseAverage" sortable="custom">
            </el-table-column>
            <!--總評鑑次數-->
            <el-table-column align="center" label="總評鑑次數" prop="allEvaluateTimes" sortable="custom">
            </el-table-column>
            <!--兩年內工務平均分-->
            <el-table-column align="center" label="兩年內工務平均分" prop="workAverage2Years" sortable="custom">
            </el-table-column>
            <!--兩年內採購平均分-->
            <el-table-column align="center" label="兩年內採購平均分" prop="purchaseAverage2Years" sortable="custom">
            </el-table-column>
            <!--兩年內評鑑次數-->
            <el-table-column align="center" label="兩年內評鑑次數" prop="allEvaluateTimes2Years" sortable="custom">
            </el-table-column>
            <!--工務最近評分-->
            <el-table-column align="center" label="工務最近評分" prop="workScoreLately" sortable="custom">
            </el-table-column>
            <!--採購最近評分-->
            <el-table-column align="center" label="採購最近評分" prop="purchaseScoreLately" sortable="custom">
            </el-table-column>
            <!--最近評鑑日期-->
            <el-table-column align="center" label="最近評鑑日期" min-width="100" prop="evaluateLatelyDate" :formatter="formatter.formatTimes" sortable="custom"/>
          </el-table>
        </div>
    </div>
</template>

<script>
  import popoverSelect from '@/components/popover-select/index.vue';
  import vendorReq from '@/api/vendor';
  import dictSelect from '@/components/Dict/dictValueSelect';
  import formatter from '@/utils/formatter';
  export default {
    data() {
      return {
        vendorTypeDic: this.$store.getters.allDic.manufacturer,
        materialDic: this.$store.getters.allDic.materialDic,
        engineDic: this.$store.getters.allDic.engineDic,
        equipmentDic: this.$store.getters.allDic.equipmentDic,
        softBody: this.$store.getters.allDic.softBody,
        listQuery: {
          order: '', // 降序（desc）/升序（asc）
          orderBy: '', // 排序字段
          vendorName: '',
          vendorType: '',
          mainClassifyArray: []
        },
        formatter,
        loading: false,
        list: []
      };
    },
    // created() {},
    mounted() {
      this.getQuery()
    },
    components: { dictSelect, 'yt-select': () => import('@/components/Yt-select/index'), popoverSelect },
    beforeDestroy() {
      window.sessionStorage.setItem('vendorOrderQueryCodition', JSON.stringify(this.listQuery))
    },
    methods: {
      exportExcel() {
        let str = ''; // 传参数
        str = 'createBy=' + this.$store.getters.info.id;
        // str = 'type=' + type;

        const a = document.createElement('a');
        const href = '/api/admin/excel/exportAppraiseScore?' + str;
        a.download = Date.now();
        a.href = href;
        a.click();
        /* const s = JSON.stringify(this.list);
        const newList = JSON.parse(s);
        console.log(newList, 'newList')
        newList.forEach(v => {
          if (v.awardedVSTarget) {
            v.awardedVSTarget = v.awardedVSTarget * 100
          }
        })
        const obj = {
          createBy: this.$store.getters.info.id,
          year: this.listQuery.year,
          list: newList
        }

        console.log(obj)

        /* exportDemandReport(obj).then(res => {
          const blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' })
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = this.$store.state.app.filename // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        })*/
      },
      getQuery() {
        const vendorOrderQueryCodition = window.sessionStorage.getItem('vendorOrderQueryCodition');
        if (vendorOrderQueryCodition) {
          this.listQuery = JSON.parse(vendorOrderQueryCodition);
        }
      },
      getReport() {
        this.loading = true
        return new Promise(resolve => {
          vendorReq.queryVendorOrder(this.listQuery).then(res => {
            this.loading = false
            if (res.status === 200) {
              this.list = res.data
              let dicArray = []
              for (let i = 0; i < this.list.length; i++) {
                dicArray = []
                if (this.list[i] && this.list[i].vendorType && this.list[i].vendorType === '1') {
                  dicArray = this.materialDic
                }
                if (this.list[i] && this.list[i].vendorType && this.list[i].vendorType === '2') {
                  dicArray = this.engineDic
                }
                if (this.list[i] && this.list[i].vendorType && this.list[i].vendorType === '3') {
                  dicArray = this.equipmentDic
                }
                if (this.list[i] && this.list[i].vendorType && this.list[i].vendorType === '4') {
                  dicArray = this.softBody
                }
                if (this.list[i] && this.list[i].vendorType) {
                  this.vendorTypeDic.forEach(v => {
                    if (v.value === this.list[i].vendorType) {
                      this.list[i].vendorType = v.label
                    }
                  })
                }
                if (this.list[i] && this.list[i].mainClassify) {
                  const arr = this.list[i].mainClassify.split(',');
                  let result = ''
                  for (let i = 0; i < arr.length; i++) {
                    dicArray.forEach(v => {
                      if (v.value === arr[i]) {
                        result = result + v.label + ','
                      }
                    })
                  }
                  if (result.length > 0) {
                    result = result.substr(0, result.length - 1)
                  }
                  this.list[i].mainClassify = result
                }
              }
              // 廠商類別  this.vendorTypeDic
              // 主項目分類 v.vendorType?v.vendorType.includes('1')?$store.getters.allDic.materialDic:$store.getters.allDic.engineDic:[]
            } else {
              this.$message.error(res.data)
            }
          })
          resolve()
        })
      },
      // 排序
      sortDate(column) {
        // this.formatter.sortByKey(this.list, column.prop, column.order)
        // 如果不是金额排序，则请求接口
        if (column.order === 'ascending') {
          this.listQuery.order = 'asc';
        } else if (column.order === 'descending') {
          this.listQuery.order = 'desc';
        }
        // clientTypeName
        this.listQuery.orderBy = column.prop;
        // 暂时不请求接口排序
        this.getReport();
      },
      reset() {
        this.listQuery.vendorName = ''
        this.listQuery.vendorType = ''
        this.listQuery.mainClassifyArray = []
        this.listQuery.order = ''
        this.listQuery.orderBy = ''
      }
    }
  }
</script>
<style scoped lang="scss">
  .row_class{
    background: #ff6700;
  }
  .el-table .cell.el-tooltip {
    　　white-space: pre-wrap !important;
  }
</style>



